import React from 'react';
import './index.scss'
// import login from './index.scss'
import { Card, Form, Button, Checkbox, Input, Flex, message } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import image from '@/assets/logo.png';
import { useDispatch } from 'react-redux';
import { feachLogin } from '@/store/modules/user';
import { useNavigate } from 'react-router-dom';
// 流程： 静态页面 -> 表单校验，与校验 -> 封装请求拦截器(request) -> 封装redux状态管理，在redux中封装异步管理函数 -> 实现点击登录，调用redux中
// 异步函数，跳转页面，存贮token -> 往请求头中注入token -> 登录访问拦截

const Login = () => {
    // 收集表单数据
    const dispatch = useDispatch()
    const navigate = useNavigate()
    const onFinish = async (values) => {
        await dispatch(feachLogin(values))
        navigate('/')
        message.success('登录成功')
    }
    return (
        <div className='Login'>
            <Card className='card'>
                <img src={image} alt="" />
                <Form name="basic" className='basic' validateTrigger="onBlur" onFinish={onFinish}>
                    {/* 用户名 */}
                    <Form.Item name="mobile"
                        rules={[
                            {
                                required: true,
                                message: '请输入手机号',
                            },
                            {
                                pattern: /^1[3-9]\d{9}$/,
                                message: '请输入正确的手机号格式',
                            },
                        ]}>
                        <Input placeholder='请输入用户名' prefix={<UserOutlined autoComplete="off" />}></Input>
                    </Form.Item>

                    {/* 密码 */}
                    <Form.Item name="code"
                        rules={[
                            {
                                required: 'true',
                                message: '请输入验证码',
                            }
                        ]}>
                        <Input.Password placeholder='请输入密码' prefix={<LockOutlined />}></Input.Password>
                    </Form.Item>
                    {/* 用户同意协议 */}
                    <Form.Item>
                        <Flex justify="space-between" align="center">
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox style={{ fontSize: '14px' }}>记住我</Checkbox>
                            </Form.Item>
                            {/* <a href="#">忘记密码</a> */}
                        </Flex>
                    </Form.Item>
                    <Form.Item>
                        <Button block type="primary" htmlType="submit">登录</Button>
                        {/* <a href="#">去注册</a> */}
                    </Form.Item>
                </Form>
            </Card>
        </div>
    );
};

export default Login;